<template>
  <div class="book-list-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="title-container">
        <router-link to="/">
          <el-icon size="30" color="#000000">
            <HomeFilled/>
          </el-icon>
        </router-link>

        <h1 class="title">书籍列表</h1>
      </div>
      <div class="actions">
        <el-input
            v-model="searchQuery"
            placeholder="搜索书籍..."
            clearable
            @keyup.enter="filterBooks"
            class="search-input"
        >
          <template #suffix>
            <el-button  @click="filterBooks">
              <el-icon>
                <DeleteFilled />
              </el-icon>
            </el-button>
          </template>
        </el-input>
        <el-button @click="filterBooks">
          <el-icon>
            <Search/>
          </el-icon>
        </el-button>
      </div>
    </div>

    <!-- 分类筛选 -->
    <el-tabs v-model="activeCategory" @tab-click="handleCategoryChange" class="category-tabs">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane v-for="category in uniqueCategories" :key="category" :label="category" :name="category"></el-tab-pane>
    </el-tabs>

    <!-- 书籍列表 -->
    <div class="books-grid">
      <BookCard :BookListData="BookListData" ></BookCard>
    </div>
    <!-- 分页控件 -->
    <div class="pagination-container">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[6, 12, 18]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="BookListData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import BookCard from "@/components/card/BookCard.vue";
import {computed, ref} from "vue";
import {DeleteFilled, HomeFilled, Search} from "@element-plus/icons-vue";
// 初始化书籍数据
const BookListData = ref([]);
BookListData.value = [
  {
    id: 1,
    imageSrc: 'default-avatar',
    title: "JavaScript高级程序设计",
    intro: "本书从JavaScript语言实现的各个组成部分——语言核心、DOM、BOM、事件模型等方面全面、深入地探讨了JavaScript编程，并详细介绍了JavaScript的各个版本，包括ECMAScript 5和HTML5中新增的特性。",
    category: "计算机科学",
    author: "Matt Frisbie",
    publisher: "人民邮电出版社",
    score: 4.8
  },
  {
    id: 2,
    imageSrc: 'default-avatar',
    title: "算法导论",
    intro: "本书是麻省理工学院计算机科学和人工智能实验室的经典教材，也是全球多所知名大学选用的教材。书中全面论述了算法的内容，从线性表到图，从排序到搜索，从动态规划到贪心算法，几乎涵盖了所有算法领域的内容。",
    category: "计算机科学",
    author: "Thomas H. Cormen",
    publisher: "机械工业出版社",
    score: 4.9
  },
  {
    id: 3,
    imageSrc: 'https://picsum.photos/seed/book3/300/400',
    title: "活着",
    intro: "讲述了在大时代背景下，主人公徐福贵的人生和家庭不断经受着苦难，到了最后，所有亲人都先后离他而去，仅剩下年老的他和一头老牛相依为命的故事。",
    category: "文学",
    author: "余华",
    publisher: "作家出版社",
    score: 4.7
  },
  {
    id: 4,
    imageSrc: 'https://picsum.photos/seed/book4/300/400',
    title: "解忧杂货店",
    intro: "该书讲述了在僻静街道旁的一家杂货店，只要写下烦恼投进店前门卷帘门的投信口，第二天就会在店后的牛奶箱里得到回答：因男友身患绝症，年轻女孩月兔在爱情与梦想间徘徊。",
    category: "小说",
    author: "东野圭吾",
    publisher: "南海出版公司",
    score: 4.6
  },
  {
    id: 5,
    imageSrc: 'https://picsum.photos/seed/book5/300/400',
    title: "时间简史",
    intro: "《时间简史》讲述了宇宙的起源和人类对宇宙的认识，包括宇宙的诞生、黑洞、时间旅行等前沿科学概念，以通俗易懂的语言向读者展示了宇宙的奥秘。",
    category: "科学",
    author: "斯蒂芬·霍金",
    publisher: "湖南科学技术出版社",
    score: 4.8
  },
  {
    id: 6,
    imageSrc: 'https://picsum.photos/seed/book6/300/400',
    title: "设计模式",
    intro: "本书是设计模式领域的经典著作，首次提出了软件开发中设计模式的概念。全书共分为四部分，第一部分介绍了设计模式的概念和应用场景，第二部分详细讲解了23种设计模式的结构、应用和实现。",
    category: "计算机科学",
    author: "Erich Gamma",
    publisher: "机械工业出版社",
    score: 4.9
  },
  {
    id: 7,
    imageSrc: 'https://picsum.photos/seed/book7/300/400',
    title: "三体",
    intro: "刘慈欣创作的长篇科幻小说系列，由《三体》《三体2：黑暗森林》《三体3：死神永生》组成，讲述了地球人类文明和三体文明的信息交流、生死搏杀及两个文明在宇宙中的兴衰历程。",
    category: "科幻",
    author: "刘慈欣",
    publisher: "重庆出版社",
    score: 4.9
  },
  {
    id: 8,
    imageSrc: 'https://picsum.photos/seed/book8/300/400',
    title: "论语译注",
    intro: "《论语》是孔子及其弟子的言行录，集中体现了儒家学派的政治主张、伦理思想、道德观念及教育原则等。杨伯峻先生在精研《论语》的基础上，对《论语》二十篇进行了精准细致的注释和翻译。",
    category: "哲学",
    author: "杨伯峻",
    publisher: "中华书局",
    score: 4.8
  }
]
// 搜索和筛选相关状态
const activeCategory = ref('all')
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(6)
// 计算属性：获取所有不同的分类
const uniqueCategories = computed(() => {
  const categories = new Set()
  BookListData.value.forEach(book => categories.add(book.category))
  return Array.from(categories)
})

// 事件处理函数
const handleCategoryChange = (tab) => {
  activeCategory.value = tab.name
  currentPage.value = 1 // 重置页码
}
// 模拟操作函数
const addBook = () => {
  alert('添加书籍功能待实现')
}

const filterBooks = () => {
  currentPage.value = 1 // 重置页码
}

const handleSizeChange = (newSize) => {
  pageSize.value = newSize
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
}

</script>

<style scoped>
.book-list-container {
  padding: 20px;
  max-width: 1440px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}



.actions {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 300px;
}

.category-tabs {
  margin-bottom: 20px;
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
}
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
/* 响应式布局 */
@media (max-width: 768px) {
  .books-grid {
    grid-template-columns: 1fr;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .actions {
    width: 100%;
  }

  .search-input {
    width: 100%;
  }
}
</style>